<!--产品详情-->
<template>
  <view class="" :style="{ 'padding-bottom': typeShow == 1 ? '80rpx' : '' }">
    <view v-if="!isShowAuth" ref="detailRef">
      <view class="paddingL20 bg_white basetop">
        <view class="row" style="align-items: flex-start">
          <view class="row" style="justify-content: flex-start; align-items: flex-start">
            <view style="
                width: 122rpx;
                height: 122rpx;
                border-radius: 15rpx;
                overflow: hidden;
              ">
              <image :src="detail.pic" style="width: 100%; height: 100%"></image>
            </view>
            <view style="margin-left: 20rpx">
              <view style="font-size: 32rpx; font-weight: 500">{{
                detail.name
                }}</view>
              <view class="row" style="
                  justify-content: flex-start;
                  margin-top: 16rpx;
                  align-items: baseline;
                ">
                <view style="
                    white-space: nowrap;
                    font-weight: 400;
                    font-size: 22rpx;
                  ">最高额度</view>
                <view class="money">
                  {{ detail.maxQuota ?detail.maxQuota : '-' }}
                  <text style="color: #ff474a; font-size: 24rpx">万</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="row" style="
            justify-content: flex-start;
            flex-wrap: wrap;
            margin-top: 20rpx;
            padding-top: 20rpx;
            border-top: 1px dashed #eeeeee;
          ">
          <view class="row" style="
              justify-content: flex-start;
              margin-right: 26rpx;
              margin-bottom: 14rpx;
            ">
            <image :src="require('../static/icon/lishuai.png')" style="width: 20rpx; height: 20rpx"></image>
            <view style="margin-left: 14rpx; color: #666666; font-size: 24rpx">
              <text>年化利率：</text>
              <text>{{ detail.minAnnualRate ? detail.minAnnualRate : '-' }}% ~ {{ detail.maxAnnualRate ? detail.maxAnnualRate : '-' }}%</text>
            </view>
          </view>
          <view class="row" style="
              justify-content: flex-start;
              margin-bottom: 14rpx;
              margin-right: 26rpx;
            ">
            <image :src="require('../static/icon/zhouqi.png')" style="width: 20rpx; height: 20rpx"></image>
            <view style="margin-left: 14rpx; color: #666666; font-size: 24rpx">
              <text>周期：</text>
              <text>{{ detail.loanTermName }}</text>
            </view>
          </view>
          <view class="row" style="justify-content: flex-start; margin-bottom: 14rpx">
            <image :src="require('../static/icon/huankuan.png')" style="width: 20rpx; height: 20rpx"></image>
            <view style="margin-left: 14rpx; color: #666666; font-size: 24rpx">
              <text>还款方式：</text>
              <text>{{ detail.repayment }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="process">
        <view class="bg_white">
          <view class="asideLeft row" @click="asideShow = !asideShow">
            <image :src="asideShow ? require('../static/icon/liebiao2.png') : require('../static/icon/liebiao.png')"
              style="width: 41rpx; height: 32rpx"></image>
            <image :src="asideShow ? require('../static/icon/shouqi.png') : require('../static/icon/zhankai.png')"
              style="width: 22rpx; height: 22rpx"></image>
          </view>
        </view>
        <view class="row" style="align-items: flex-start; justify-content: flex-start">
          <view :style="'height:' + height + 'rpx;'">
            <scroll-view v-show="asideShow" scroll-y="true" scroll-with-animation="true" style="height: 100%">
              <view class="tabStyle" :class="navActive == index ? 'tab-style-ac' : ''"
                v-for="(item, index) in detail.customRequireList" :key="index" v-if="item.content"
                @click="tap(index, 'b' + index)">
                <text>{{ item.title }}</text>
              </view>
            </scroll-view>
          </view>
          <view class="bg_white paddingL15" style="padding-bottom: 20rpx; width: 100%">
            <scroll-view scroll-y="true" :scroll-into-view="toView" :style="'height:' + height + 'rpx;'"
              @scroll="scroll" scroll-with-animation="true">
              <block v-for="(item, index) in detail.customRequireList" :key="index">
                <view class="contentTitle" :id="'b' + index" v-if="item.content">
                  <view class="baseinfo">
                    <view class="title">
                      <text class="titleIcon"></text>
                      <text style="margin-left: 20rpx; font-size: 30rpx">{{
                        item.title
                        }}</text>
                    </view>
                  </view>
                </view>
                <view v-if="item.title == '准入地区'" class="contentAside" style="font-size: 28rpx">
                  <view v-if="item.accessAreaType == 2">
                    <view v-for="(v, i) in item.content" :key="i">
                      <view style="font-weight: bold">{{ v.label }}{{ v.children ? "：" : "" }}</view>
                      <text>{{
                        v.children && v.children.map((p) => p.label).join("、")
                        }}</text>
                    </view>
                  </view>
                  <view v-else style="font-size: 28rpx">{{
                    item.content
                    }}</view>
                </view>
                <view v-else-if="item.title == '申请流程'" style="margin-top: 20rpx; font-size: 28rpx">
                  <jyf-parser v-html="item.content" lazy-load show-with-animation ref="article"></jyf-parser>

                </view>
                <view v-else-if="item.title == '禁入行业'" style="margin-top: 20rpx; font-size: 28rpx">
                  <text v-for="(v, i) in item.content" :key="i">{{ v.industryName }}、</text>
                </view>
                <text v-else style="font-size: 28rpx" class="contentAside" space="ensp">{{ item.content }}</text>
              </block>
            </scroll-view>
          </view>
        </view>
      </view>

      <view class="footer-box">
        <button @click="customer()" class="footer-btn">联系客服</button>
      </view>

    </view>
  </view>
</template>

<script>
import { getProductDetailApi } from "@/api/product";
import { mapGetters } from "vuex";
import Authorize from "@/components/Authorize.vue";
import { bankListApi, searchDicListApi } from "@/api/public";
import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
export default {
  components: {
    Authorize,
    jyfParser,
  },
  props: {},
  computed: {
    ...mapGetters(["isLogin"]),
  },
  data() {
    return {
      publishStatusShow: "",
      isShowAuth: false,
      loading: false,
      asideShow: true,
      detail: {},
      id: null,
      typeShow: null,
      bankStatusMap: [],
      cidList: [],
      loanTermList: [],
      repaymentTypeList: [],
      height: 0,
      hightArr: [],
      navActive: 0,
      toView: "",
    };
  },
  async onLoad(options) {
    if (options.publishStatus == 2) {
      this.publishStatusShow = 2;
      this.$util.Tips("产品已经下架啦~");
    }
    if (options?.id) {
      this.id = options.id;
    }
    if (options?.type) {
      this.typeShow = options.type;
    }
    this.loading = true;
    await this.getDictList();
    await this.getBackList();
    await this.getProductDetail();
  },
  methods: {
    customer() {
      // #ifdef MP-WEIXIN
      wx.openCustomerServiceChat({
        extInfo: {
          url: 'https://work.weixin.qq.com/kfid/kfc389dffe7ae981936'
        },
        corpId: 'ww1c4069be6ea4025e',
        showMessageCard: true,
        sendMessageTitle: this.detail.name,
        sendMessageImg: this.detail.pic,
        success(res) {
          console.log(res);
        },
        fail(err) {
          console.log(err);
        },
      })
      // #endif
    },
    tap: function (index, id) {
      this.toView = id;
      this.navActive = index;
      let height;
      uni
        .createSelectorQuery()
        .in(this)
        .select(".basetop")
        .boundingClientRect((data) => {
          height = data.height;
          // this.$refs.detailRef
          uni.pageScrollTo({
            selector: 200,
            scrollTop: height,
            duration: 50
          });
        })
        .exec();
    },
    scroll(e) {
      let scrollTop = e.detail.scrollTop;
      let scrollArr = this.hightArr;
      for (let i = 0; i < scrollArr.length; i++) {
        if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
          // this.navActive = 0
        } else if (
          scrollTop >= scrollArr[i] - scrollArr[0] &&
          scrollTop < scrollArr[i + 1] - scrollArr[0]
        ) {
          // this.navActive = i
        } else if (
          scrollTop >=
          scrollArr[scrollArr.length - 1] - scrollArr[0]
        ) {
          // this.navActive = scrollArr.length - 1
        }
      }
    },
    infoScroll() {
      let that = this;
      let len = this.detail.customRequireList.length;
      uni.getSystemInfo({
        success: function (res) {
          that.height = res.windowHeight * (750 / res.windowWidth) - 98;
        },
      });

      let height = 0;
      let hightArr = [];
      for (let i = 0; i < len; i++) {
        //获取元素所在位置
        let query = uni.createSelectorQuery().in(this);
        let idView = "#b" + i;
        query.select(idView).boundingClientRect();
        query.exec(function (res) {
          let top = res[0] && res[0].top;
          hightArr.push(top);
          that.hightArr = hightArr;
        });
      }
    },
    async getDictList() {
      let res = await searchDicListApi("product_cid,repayment_type,loan_term_list"
      );
      this.cidList = res.data.product_cid.map((v) => v.dictLabel);
      this.repaymentTypeList = res.data.repayment_type;
      this.loanTermList = res.data.loan_term_list;
    },
    async getBackList() {
      let res = await bankListApi();
      if (res.code == 200) {
        this.bankStatusMap = res.data;
      }
    },
    async getProductDetail() {
      let that = this;
      try {
        let res = await getProductDetailApi({ id: this.id });
        if (res.code === 200) {
          setTimeout(() => {
            this.loading = false;
          }, 500);
          this.detail = res.data;
          if (res.data.publishStatus == 2) {
            this.publishStatusShow = 2;
            this.$util.Tips("产品已经下架啦~");
          }
          const imgReg = /<img(.*?)\/?>/g;
          res.data.applyDesc =
            res.data.applyDesc &&
            res.data.applyDesc.replace(imgReg, (match, attrs) => {
              let arr = match.split("/>");
              arr.push("style='width:100%' />");
              return arr.join("");
            });
          let Arr = [
            {
              title: "个人要求",
              content: res.data.legalApplyRequire || "",
            },
            {
              title: "企业要求",
              content: res.data.companyTaxInfo || "",
            },
            {
              title: "征信要求",
              content: res.data.creditRequire || "",
            },
            {
              title: "准入地区",
              accessAreaType: res.data.accessAreaType,
              content:
                res.data.accessAreaType == 2 ? res.data.treeSelect : "全国",
            },
            {
              title: "禁入行业",
              content: res.data.forbidIndustryList || "",
            },
            {
              title: "准入行业",
              content: res.data.accessIndustry || "",
            },
            {
              title: "申请流程",
              content: res.data.applyDesc || "",
            },
          ];
          this.detail.customRequireList = [
            ...Arr,
            ...res.data.customRequireList,
          ];
          setTimeout(function () {
            that.infoScroll();
          }, 500);
          uni.setNavigationBarTitle({ title: res.data.name });
          let prod = JSON.parse(
            JSON.parse(JSON.stringify(this.detail.advantageData))
          );
          let prodArr = [];
          prod.forEach((item) => {
            if (item.length > 0) prodArr.push(item);
          });
          this.detail.advantageData = prodArr;
          let arr = [];
          let newArr = res.data.repaymentType.split(",");
          newArr.forEach((item) => {
            this.repaymentTypeList.forEach((v) => {
              if (item == v.dictValue) {
                arr.push(v.dictLabel);
              }
            });
          });
          this.$set(this.detail, "repayment", arr.join("、"));
          this.bankStatusMap.forEach((item) => {
            if (item.id == res.data.bankId) {
              this.$set(this.detail, "bankName", item.name);
            }
          });
          let str = [];
          res.data.loanTerm.split(",").forEach((item) => {
            item += "期";
            str.push(item);
          });
          this.$set(this.detail, "loanTermName", str.join("/"));
        }
      } catch (e) {
        this.loading = false;
      }
    },

    // 请求成功回调
    onLoadFun(e) {
      this.isShowAuth = false;
      this.getProductDetail();
    },
    authColse() {
      this.isShowAuth = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.process {
  margin-top: 20rpx;
  padding-bottom: 88rpx;
}

.tab-style-ac {
  background-color: #fff;
  color: #3379FD;
  border-radius: 50rpx 0rpx 0rpx 50rpx;
  font-weight: 500
}

.money {
  color: #ff474a;
  font-size: 34rpx;
  margin-left: 16rpx;
  //font-family: pingfangBold;
}

.basetop {
  padding-top: 30rpx;
  padding-bottom: 30rpx;
}

.colorBG {
  background: #ddd !important;
}

.colorborder {
  border: 1px solid #eee !important;
  //background: #eee !important ;
}

.matchNow {
  color: #ffffff;
  background: #2872fd;
  border-radius: 50rpx;
  //border: 1px solid #F2891C;
  font-weight: bold;
}

.point {
  display: inline-block;
  width: 10rpx;
  height: 10rpx;
  background: #f2891c;
  border-radius: 50%;
  margin-right: 20rpx;
}

.tagStyle {
  text {
    background: rgba(242, 137, 28, 0.16);
    color: #f2891c;
    font-size: 24rpx;
    margin-right: 20rpx;
    padding: 5rpx 20rpx;
    border-radius: 20rpx;
  }
}

.footerBtnBox {
  padding: 10rpx 20rpx 0 30rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 98;
  border-top: 1rpx solid #f0f0f0;
  height: 148rpx;
  height: calc(148rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  height: calc(148rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  display: flex;
  align-items: center;

  .matchNow {
    width: 50%;
    height: 88rpx;
    border-radius: 44rpx;
    border: 2rpx solid #2872fd;
    font-weight: 500;
    font-size: 32rpx;
    line-height: 84rpx;
    margin-right: 30rpx;
  }

  .applyProduct {
    width: 50%;
    height: 88rpx;
    background: #2872fd;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
  }
}

.tabStyle {
  width: 192rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
}

.contentTitle {
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  font-weight: bold;
  //background: rgba(242, 137, 28, 0.1);
  border-bottom: 1px dashed #ddeaff;
}

.contentAside {
  margin: 25rpx auto;
  line-height: 50rpx;
  display: block;
}

.title {
  //margin-left: 20rpx;
  //padding: 0 18rpx;
  height: 80rpx;
  line-height: 80rpx;
  //border-left: 5px solid #F2891C;
  color: #333;
  font-weight: bold;
  position: relative;
}

.titleIcon {
  display: inline-block;
  width: 8rpx;
  height: 30rpx;
  background: #2872fd;
  margin-right: 10rpx;
  position: absolute;
  top: 25rpx;
  border-radius: 10rpx;
}

.asideLeft {
  width: 127rpx;
  height: 65rpx;
  padding: 0 24rpx;
  border-radius: 0 33rpx 33rpx 0;
  background-color: #3379fd;
}

.right_NOW {
  width: 100% !important;
}


.footer-box {
    background: rgba(246, 249, 248, 1);
    position: fixed;
    left: 0;
    bottom: 5rpx;
    z-index: 10;
    padding: 30rpx 30rpx 44rpx;
	right: 0;
  .footer-btn {
    // width: 660rpx;
    height: 88rpx;
    font-size: 34rpx;
    background: #2872fd;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    color: #fff;
    text-align: center;
    line-height: 88rpx;
  }
}
</style>
